<!--  -->
<template>
  <div class="detail_box">
    <div v-for="item in boxData.box" :key="item">
      <van-icon name="checked" color="#8b0000" size="14px" />
      {{ item }}
    </div>
  </div>
  <div class="detail">
    <h3>{{ info.name }}</h3>
    <h4>{{ info.goods_brief }}</h4>
    <p :style="{ color: '#8b0000' }">￥{{ info.retail_price }}.00元</p>
  </div>
  <div class="selet" @click="showClick">
    选择商品参数
    <van-icon name="arrow" />
  </div>
  <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
    <div class="selet_goods">
      <div class="img">
        <img :src="info.list_pic_url" alt="" />
        <div class="img_detail">
          <p style="padding-left: 26px">
            价格： ￥{{ info.retail_price }}.00元
          </p>
          <p>库存： {{ info.goods_number }}{{ info.goods_unit }}</p>
        </div>
      </div>
      <!-- 数量
       -->
      <div class="number" style="width: 100%; padding: 10px 30px 0">
        <div style="font-size: 15px; padding-bottom: 20px">数量:</div>
        <van-stepper v-model="value" :max="info.goods_number" />
      </div>
    </div>
  </van-popup>
</template>

<script>
import { defineComponent, ref, reactive, watch, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "DetailBox",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  setup() {
    const store = useStore();
    let value = ref(1);
    let show = ref(false);
    let boxData = reactive({
      box: ["30天无忧退货", "48小时快速退货", "满88元免邮费"],
    });
    const showClick = () => {
      show.value = true;
    };
    onMounted(() => {
      store.cartNum = value.value;
      console.log(store.cartNum);
    });
    watch(
      () => value.value,
      () => {
        store.cartNum = value.value;
        console.log(store.cartNum);
      }
    );
    return {
      boxData,
      show,
      showClick,
      value,
    };
  },
});
</script>

<style lang="scss" scoped>
.detail_box {
  height: 60px;
  display: flex;
  background-color: #fff;
}
.detail_box div {
  width: 33.333%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  line-height: 60px;
}
/* .detail_box .van-icon {
    color: #8b0000;
  } */
.detail {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
h3 {
  font-size: 40px;
}
h4,
p {
  font-size: 30px;
}
h3,
h4,
p {
  background-color: #fff;
  font-weight: normal;
  width: 100%;
  text-align: center;
  padding: 20px 0;
}
.selet {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #fff;
  padding: 20px 32px;
  font-size: 30px;
}
.img {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 30px;
}
.img img {
  margin-left: 20px;
  width: 200px;
  height: 200px;
}
</style>
